/* SPDX-License-Identifier: Apache-2.0 */

/*
  A heading aligned in the center, with a sub title and horziontal rule:

  <div class="centered-heading">
    <h1 class="centered-heading__title">Title</h1>
    <p class="centered-heading__subtitle">Subtitle</p>
    <hr class="centered-heading__rule">
  </div>
*/

.centered-heading {
  text-align: center;

  &__title {
    @include h1-title;
    padding-bottom: 0;
  }

  &__rule {
    max-width: 300px;
    margin: $half-spacing-unit auto ($spacing-unit * 2);
    background: $base-grey;

    @media only screen and (max-width: $tablet) {
      display: none;
    }
  }
}
